<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/table_jqgrid.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:02 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>教练信息管理</title>
     <link href="/stylesheets/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/stylesheets/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="/stylesheets/common.css" rel="stylesheet">
    <link href="/stylesheets/webcss.css"  rel="stylesheet"/>
    <!-- jqgrid-->
    <link href="/stylesheets/plugins/jqgrid/ui.jqgridffe4.css?0820" rel="stylesheet">

    <link href="/stylesheets/animate.min.css" rel="stylesheet">
    <link href="/stylesheets/style.min862f.css?v=4.1.0" rel="stylesheet">

    <style>
        /* Additional style to fix warning dialog position */

        #alertmod_table_list_2 {
            top: 900px !important;
        }
    </style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                       <div class="c">
                        	<div>
                        		<span class="mr20">手机号<input type="text" class="pt5 pb5 pl10 pr10 ml10"></span>
                        		<span class="mr20">姓名<input type="text" class="pt5 pb5 pl10 pr10 ml10"></span>
                        		<span class="mr20">性别<input type="text" class="pt5 pb5 pl10 pr10 ml10"></span>
                        		<span class="mr20">身份证号<input type="text" class="pt5 pb5 pl10 pr10 ml10"></span>
                        		<span class="mr20">所属场地<input type="text" class="pt5 pb5 pl10 pr10 ml10"></span>
                        	</div>
                        	<div class="pd10 mt10"><input type="button" value="查询" class="btn btn-info pr10 pl10 mr20"><input type="button" value="添加" class="btn btn-primary pr10 pl10"></div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="jqGrid_wrapper">
                            <table id="table_list_2"></table>
                            <div id="pager_list_2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/javascripts/jquery.min.js?v=2.1.4"></script>
    <script src="/javascripts/bootstrap.min.js?v=3.3.6"></script>
    <script src="/javascripts/plugins/peity/jquery.peity.min.js"></script>
    <script src="/javascripts/plugins/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>
    <script src="/javascripts/plugins/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>
    <script src="/javascripts/content.min.js?v=1.0.0"></script>
  <script>
	$(document).ready(function() {
		$.jgrid.defaults.styleUI = "Bootstrap"; 
		var mydata = [{ id: "1", invdate: "2010-05-24", name: "test", note: "note", tax: "10.00", total: "2111.00" }, { id: "2", invdate: "2010-05-25", name: "test2", note: "note2", tax: "20.00", total: "320.00" }, { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", tax: "30.00", total: "430.00" }, { id: "4", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00" }, { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", tax: "20.00", total: "320.00" }, { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", tax: "30.00", total: "430.00" }, { id: "7", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00" }, { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "21.00", total: "320.00" }, { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "12", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "14", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "15", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "16", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "17", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "18", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "19", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "21", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "22", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "23", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "24", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "25", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "26", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "27", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "28", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "29", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }];
		$("#table_list_2").jqGrid({ 
			multiselect : true, 
			data:mydata, datatype: "local",
			height: 450, 
			autowidth: true,
			shrinkToFit: true, 
			rowNum: 20, 
			rowList: [10, 20, 30],
		    colNames: ["按钮","序号", "日期", "客户", "金额", "运费", "总额", "备注"], 
		    colModel : [{ name: "act", index: "act", editable: true, width:100, sorttype: "int", search: true ,editable : false},{ name: "id", index: "id", editable: true, width: 60, sorttype: "int", search: true }, { name: "invdate", index: "invdate", editable: true, width: 90, sorttype: "date", formatter: "date" }, { name: "name", index: "name", editable: true, width: 100 }, { name: "amount", index: "amount", editable: true, width: 80, align: "right", sorttype: "float", formatter: "number" }, { name: "tax", index: "tax", editable: true, width: 80, align: "right", sorttype: "float" }, { name: "total", index: "total", editable: true, width: 80, align: "right", sorttype: "float" }, { name: "note", index: "note", editable: true, width: 100, sortable: false }], pager: "#pager_list_2", viewrecords: true, add: true, edit: true, addtext: "Add", edittext: "Edit", hidegrid: false,
		gridComplete : function() {
              var ids = jQuery("#table_list_2").jqGrid('getDataIDs');
              for ( var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#table_list_2').editRow('"
                    + cl + "');\" />";
                se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#table_list_2').saveRow('"
                    + cl + "');\" />";
                ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#table_list_2').restoreRow('"
                    + cl + "');\" />";
                jQuery("#table_list_2").jqGrid('setRowData', ids[i],
                    {
                      act : be + se + ce
                    });
              }
            }
});
		$("#table_list_2").setSelection(4, true);
		$("#table_list_2").jqGrid("navGrid", "#pager_list_2", { edit: true, add: true, del: true, search: true }, { height: 200, reloadAfterSubmit: true });
		$(window).bind("resize", function() { 
			var width = $(".jqGrid_wrapper").width();
			$("#table_list_2").setGridWidth(width) }) });
</script>
</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/table_jqgrid.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:02 GMT -->
</html>
